<template>
  <div class="searchcity">
    <div class="city-info"><h1>你正在预览{{cityName}}的天气信息，可以通过右上角的"+"号按钮保存起来</h1></div>
    <div class="tips-container">
      <h1>当日气温是：{{ daytemp }}摄氏度</h1>
      <h1>当日天气是：{{ dayweather }}</h1>
      <h1>当日风向是：{{ daywind }}</h1>
      <h1>当日风力是：{{ daypower }}级</h1>
    </div>
    <div class="echarts-container">
      <div class="echarts-text">
        <div v-for="item in weathers" :key="item.id" class="text-list">
          <span>{{ item.week }}</span>
          <span>{{ item.date }}</span>
          <span>{{ item.dayweather }}</span>
          <span>{{ item.daywind }}</span>
        </div>
      </div>
      <div class="echarts">
        <e-charts :option="option" class="echart"></e-charts>
      </div>
    </div>
  </div>
</template>

<script>
import ECharts from "@/components/ECharts.vue";
import { requestWeatherByCode } from "@/api/request";
export default {
  name: "SearchView",
  data() {
    return {
      option: {
        grid: {
          left: "-3%",
          right: "0%",
          containLabel: true, // 自适应图表大小以容纳标签
        },
        xAxis: {
          data: [],
          show: false,
        },
        yAxis: {
          show: false,
        },
        series: [
          {
            data: [],
            type: "line",
            smooth: true,
            label: {
              show: true,
              position: "top",
              color: "#fff",
              formatter: function (params) {
                return "白" + params.value + "℃";
              },
            },
          },
          {
            data: [],
            type: "line",
            smooth: true,
            label: {
              show: true,
              position: "bottom",
              textStyle: {
                color: "#fff",
              },
              formatter: function (params) {
                return "晚" + params.value + "℃";
              },
            },
          },
        ],
      },
      adCode:'',
      weathers: [],
      cityName:'',
      daytemp: "",
      dayweather: "",
      daywind: "",
      daypower: "",
    };
  },
  methods: {
    async getWeatherByCode(adCode){
      const res = await requestWeatherByCode(adCode)
      this.weathers = res.forecasts[0].casts;
      this.daytemp = this.weathers[0].daytemp;
      this.dayweather = this.weathers[0].dayweather;
      this.daywind = this.weathers[0].daywind;
      this.daypower = this.weathers[0].daypower;

    this.option.series[0].data = this.weathers.map((item) => item.daytemp);
    this.option.series[1].data = this.weathers.map((item) => item.nighttemp);
    }
  },
  components: {
    ECharts,
  },
  mounted() {
    this.cityName = this.$store.state.cityName
    this.adCode = this.$store.state.adCode
    this.getWeatherByCode(this.adCode)
  },
};
</script>

<style scoped>
.echarts-container {
  width: 75%;
  margin: 0.5rem auto;
  padding: 2.5rem 3rem 0 3rem;
  border-radius: 0.25rem;
  background-color: rgb(0, 78, 113);
  box-sizing: border-box;
}
.tips-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
  width: 100%;
  margin-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.city-info{
  text-align: center;
  padding: 12px;
  background-color: rgb(0, 78, 113);
}
.tips-container h1{
  padding: 4px;
}
.echarts-text {
  display: flex;
  width: 100%;
  gap: 1.5rem;
}
.echarts-text .text-list {
  display: flex;
  flex: 1 1 0%;
  gap: 1rem;
  text-align: center;
  flex-direction: column;
}
.echarts {
  position: relative;
  width: 100%;
  height: 200px;
}
.echart {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 200px;
  user-select: none;
}
</style>
